<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>BOM: location</title>
        <style type="text/css">
            .wrapper{ width: 80%; margin: auto ; border: 1px solid gray ; }
            .wrapper>div { margin: 10px; border: 1px solid blue ; padding: 10px;}
        </style>
    </head>
    <body>

        <div class="wrapper"></div>

        <script type="text/javascript">
            const w = document.querySelector( '.wrapper' );
            const propertyNames = [ "href" , "protocol" , "host" , "hostname" , "port" ,"pathname" , "search" , 'hash' ];
            propertyNames.forEach( name => {
                let node = document.createElement( 'div' );
                node.innerHTML = `${name} : ${ location[ name ] }` ;
                w.appendChild( node );
            });
        </script>
        
    </body>
</html>